<template>
  <a-layout-header class="header">
    <a :href="'/'" class="logo">知知</a>
    <a-tabs v-model:activeKey="activeKey" class="tabs" :tabBarStyle="customTabBarStyle">
      <a-tab-pane key="1" tab="首页" />
      <a-tab-pane key="2" tab="问答" />
      <a-tab-pane key="3" tab="面经" />
      <a-tab-pane key="4" tab="关于我" />
      <a-tab-pane key="5" tab="联系" />
    </a-tabs>
    <div class="auth-section">
      <div v-if="!isLoggedIn" class="login-head">
        <a-button danger block>登录</a-button>
        <a-button danger block>注册</a-button>
      </div>
    </div>
  </a-layout-header>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const props = defineProps<{ isLoggedIn: boolean }>();
const activeKey = ref('1');
const isLoggedIn = props.isLoggedIn;

const customTabBarStyle = {
  fontSize: '131266px',
  fontWeight: 'normal',
  color: '#6c757d', // 灰蓝色
  padding: '0 16px',
  fontFamily: '"Lora", Arial, sans-serif' // Lora 字体 + Arial 备选
};
</script>

<style scoped>
.header {
  background: #ffffff;
  color: #000;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #dcdcdc;
  height: 60px; /* Ensure header height */
}

.logo {
  color: #000;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  margin-right: auto;
}

.tabs {
  flex: 2;
  margin: 0 120px; /* Ensure space on both sides */
  height: 100%;
  padding: 13px;
}

.auth-section {
  display: flex;
  align-items: center;
}

.login-head {
  display: flex;
  mairgin: 10px;
  padding: 10px;
}

.login-head .ant-btn {
  margin: 0 8px; /* 设置按钮的左右边距 */
}

/* 针对第一个按钮移除左边距，针对最后一个按钮移除右边距 */
.login-head .ant-btn:first-child {
  margin-left: 0; /* 第一个按钮左边距为0 */
}

.login-head .ant-btn:last-child {
  margin-right: 0; /* 最后一个按钮右边距为0 */
}

</style>
